<template>
<div class="container">
    <h1>事件修饰符</h1>
    <div class="container_1" @click="parentClick">
        外面的点击事件
        <!-- .stop可以阻止事件冒泡传递 @click.stop -->
        <button @click.stop="childClick">stop点击</button>
    </div>
    <div class="container_1">
        <!-- prevent阻止 @submit.prevent可以在表单提交时不要默认刷新-->
         <form @submit="handleSubmit">
            <input placeholder="输入。。。" />
            <button>提交</button>
         </form>
         <form @submit.prevent="handleSubmit">
            <input placeholder="输入。。。" />
            <button>提交</button>
         </form>
    </div>
    <div class="container_1">
        <!-- self 作用：仅当事件目标自身触发时才处理事件 -->
         <div @click.self="selfClick">
            sele点击我
            <button>按钮</button>
         </div>
    </div>
    <div class="container_1" @click.capture="parentClick">
        外层点击
        <!-- .capture 修饰符 让事件从外到里触发 -->
        <button @click="childClick">
            里层点击
        </button>
    </div>
    <div class="container_1" @click.once="handleOnce">
        <!-- .once 确保事件只触发一次 -->
        once点击我
    </div>
</div>
</template>

<script setup>
const parentClick = () => {
    alert('外层点击之后的弹出框')
}
const childClick =() => {
    alert('里层的点击事件弹出')
}

const handleSubmit =() => {
    alert('表单提交')
}

const selfClick = () => {
    alert('self的点击')
}

const handleOnce = () => {
    alert('once的弹出框')
}

</script>

<style scoped>
.container {
    background-color: rgb(192, 192, 192);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
.container_1 {
    background-color: rgb(216, 216, 216);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
</style>